<!DOCTYPE html>
<meta charset="utf-8">
<style>
	table {
		width: 300px;
		box-sizing: border-box;
		/*设置边框模式,collapse 边框合并,separate 边框分离*/
		border-collapse: collapse;
		/* “边框分离” 模式下相邻单元格间距,第一个值表示左右,第二个值表示上下*/
		/* border-spacing: 20px 1px; */
		/* “边框分离” 模式下表格中没有可见内容的单元格的边框和背景。hide:隐藏,show:显示*/
		/* empty-cells: hide; */
		/*定义了用于布局表格的单元格、行和列的算法。
		默认表格布局是 auto，表格将会根据其内容自动扩展大小，而不考虑指定的 width。
		如果表格布局是 fixed, 表格和列的宽度是由 table 和 col 元素的宽度或第一行单元格的宽度来设置的。后续行中的单元格不会影响列的宽度。 */
		table-layout: fixed;
	}

	.col1 {
		background-color: #31ea79;
	}
	.col2 {
		background-color: #22d4e4;
	}
	thead {
		background-color: #f1c40f;
	}
	td,
	th {
		border: 1px solid black;
		text-align: center;
		padding: 15px;
	}
</style>

<body>
	<table>
		<!-- table表格中标签的出现次序caption - colgroup - thead - tbody - tfoot只要定义了就必须按照个这个顺序书写 -->
		<colgroup span="2" class="col1"></colgroup>
		<colgroup span="1" class="col2"></colgroup>
		<thead>
			<tr>
				<th colspan="2">1</th>
				<th colspan="1">2</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td rowspan="2">A</td>
				<td>A-1</td>
				<td>A-2</td>
			</tr>
			<tr>
				<td>A-1</td>
				<td>A-2</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td rowspan="2">B</td>
				<td>B-1</td>
				<td>B-2</td>
			</tr>
		</tfoot>
	</table>

</body>